<!DOCTYPE html>
<html>
<html xmlns:th="http://www.thymeleaf.org"/>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title></title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
    <link href="https://cdn.bootcss.com/jquery-mobile/1.4.5/jquery.mobile.theme.css" rel="stylesheet">

    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            // 在此处编写需要在文档加载完成后执行的代码

            // 加载课题类别下拉框
            onloadMeetingType();

            // 加载可抢单列表
            loadGrabListByUidOrTid(0);
        });

        function loadGrabListByUidOrTid(tid) {
            var encryptUid = $("#encryptUid").val();
            $("#grabDiv").empty();
            $("#grabNum").empty();
            $.ajax({
                type: "GET",
                url: "/meetingGrab/grabListByUidOrTid",
                data: {"encryptUid": encryptUid, "tid": tid},
                success: function (msg) {
                    var code = msg.code;
                    if (code == "2000") {
                        var data = msg.data;
                        var appendHtml = "";
                        for (let i = 0; i < data.length; i++) {
                            var mname = data[i].ptitle;
                            var remark = data[i].meetingType.tname;
                            var dateCurr = data[i].pcode;
                            var pid = data[i].id;


                            appendHtml += "<div style='width: 100%;background-color: white;margin-top: -3px;padding:10px 10px 10px 15px;display: inline-block;'>" +
                                "<div style='width: 70%;float: left;' onclick='showMeetingInfo(\"" + 1 + "\");'>" +
                                "<div style='white-space: nowrap;overflow: hidden;text-overflow:ellipsis;display: block;font-size:18px;'>" +
                                mname + "</div>" +
                                "<div style='white-space: nowrap;overflow: hidden;text-overflow:ellipsis;display: block;color: #777777;font-size:16px;padding-top:1px'>" +
                                remark + " / " + dateCurr + "</div></div>" +
                                "<div style='width: 30%;float: right;'>" +
                                "<button class='able-btn'  onclick='meetingGrabToAddPage(\"" + pid + "\")' >可抢单</button></div></div>";

                        }
                        $("#grabNum").append(data.length);
                        $("#grabDiv").append(appendHtml);
                    } else if (msg.code == "4003") {
                        alert("非法请求参数，用户在前端拼接");
                        // 路径重定向，或者关闭页面，或者回到主页面
                    }
                }
            });
        }

        /**
         * 进入抢单页面
         * @param pid
         */
        function meetingGrabToAddPage(pid) {
            var encryptUid = $("#encryptUid").val();
            // form表单提交或者window.location.href=""
            window.location.href = '/meetingGrab/meetingGrabToAddPage?pid=' + pid + '&encryptUid=' + encryptUid;
        }

        function onloadMeetingType() {
            $.ajax({
                type: "get",
                url: "/meetingType/list",
                success: function (msg) {
                    var objs = msg.data;
                    var appendHtml = '<option value="0" selected>可抢单</option>';
                    for (let i = 0; i < objs.length; i++) {
                        var tid = objs[i].id;
                        var tname = objs[i].tname;
                        appendHtml += '<option value="' + tid + '">' + tname + '</option>';
                    }
                    $("#tid").append(appendHtml);
                }
            });
        }

        function showPubDiv() {
            $("#two_line").css("border-top", "5px solid #4E90C7");
            //$("#two_tab").css("color","#777777");
            $("#one_line").css("border-top", "5px solid white");
            //$("#one_tab").css("color","white");
            $("#two").css("display", "none");
            $("#one").css("display", "block");
        }

        function showMyMeetings() {

            $("#two_line").css("border-top", "5px solid white");
            $("#one_line").css("border-top", "5px solid #4E90C7");

            $("#one").css("display", "none");
            $("#two").css("display", "block");

            $("#two").empty();
            var encryptUid = $("#encryptUid").val();
            $.ajax({
                type: "GET",
                url: "/meetingGrab/selectListMeetingGrabByUid",
                data: {
                    'encryptUid': encryptUid
                },
                success: function (msg) {
                    var code = msg.code;
                    if (code == "2000") {
                        var data = msg.data;
                        var appendHtml = "<font style='padding: 10px 10px 10px 15px;display: block;color: #777777;'>您共抢了" + data.length + "单会议</font>";
                        for (let i = 0; i < data.length; i++) {
                            var mname = data[i].meetingPub.ptitle;
                            var remark = data[i].meetingPub.meetingType.tname;
                            var dateCurr = data[i].meetingPub.pcode;

                            appendHtml += "<div style='width: 100%;background-color: white;margin-top: -3px;padding:10px 10px 10px 15px;display: inline-block;'>" +
                                "<div style='width: 70%;float: left;' onclick='showMeetingInfo(\"" + 1 + "\");'>" +
                                "<div style='white-space: nowrap;overflow: hidden;text-overflow:ellipsis;display: block;font-size:18px;'>" +
                                mname + "</div>" +
                                "<div style='white-space: nowrap;overflow: hidden;text-overflow:ellipsis;display: block;color: #777777;font-size:16px;padding-top:1px'>" +
                                remark + " / " + dateCurr + "</div></div>" +
                                "<div style='width: 30%;float: right;'>" +
                                "<button class='able-btn' >选择讲者</button></div></div>";
                        }
                        $("#two").append(appendHtml);
                    }
                }
            });
        }
    </script>
</head>

<body>
<div data-role="page" id="pageDetail">
    <input type="hidden" id="encryptUid" name="encryptUid" th:value="${encryptUid}">
    <div style="padding:0px;background-color: #4E90C7;width: 100%;height:40px;line-height:40px;font-size:18px;text-align: center;cursor: pointer;"
         data-role="none">
        <div style="width: 50%;float: left;color: white;" onclick="showPubDiv();" id="one_tab">
            抢单
            <div style="border-right: 1px solid white;float: right;margin-top: 10px;height: 20px;"></div>
        </div>
        <div style="width: 50%;float: left;color: white;" onclick="showMyMeetings();" id="two_tab">我的抢单</div>
        <div style="border-top:5px solid white;width: 50%;float: left;" id="one_line"></div>
        <div style="border-top:5px solid #4E90C7;width: 50%;float: left;" id="two_line"></div>
    </div>
    <div id="one" class="ui-body-d ui-content" style="padding:0;display: block;width: 100%;">
        <div style="padding:0 0 0 15px;display: block;width: 55%;float: left;line-height: 60px;color: #777777;">
            可参与<font id="grabNum"></font>场会议的抢单
        </div>
        <div style="width: calc(45% - 15px);float: right;">
            <select id="tid" onchange="loadGrabListByUidOrTid(this.value)">
            </select>
        </div>
        <div id="grabDiv" style="width: 100%;float: left;"></div>
    </div>


    <div id="two" class="ui-body-d ui-content" style="padding: 0;display: none;width: 100%;">

    </div>
</body>

</html>
